<template>
	<view style="height: 100%;
    background-color: #f0f0f0">
		<view class="top">
			
			<view @click="hidden()" v-if="shaixuanFlag" @touchmove.stop.prevent class="sxMask">
				<view @tap.stop class="innerMask">
					<view class="innerMaskTop">
						<text>筛选<image class="sx" src="../static/images/sx.jpg" mode=""></image></text>
					</view>
													
					<view  style="" class="fs18 C666 pl20 mt55mb30">
						优惠券面额
					</view>
					
					<view class="inputs pl20">
						<input v-model="input1" class="fl sxInput" type="number" value="" />
						<view class="fl sxblx" >~</view>
						<input v-model="input2" class="fl sxInput" type="number" value="" />
					</view>
					<view style="width:710upx;height: 3upx;margin: 0 auto;background-color: #fafafa;position: absolute;top: 300upx;">
												
					</view>
					
					<view style="clear: both;margin-top: 150upx;" class="mt55mb30 fs18 C666 pl20 ">
						所需积分
					</view>
					
					<view class="inputs pl20">
						<input v-model="input3" class="fl sxInput" type="number" value="" />
						<view class="fl sxblx" >~</view>
						<input v-model="input4" class="fl sxInput" type="number" value="" />
					</view>
					
					<view class="innerMaskBottom">
						<button @click="cancel()" class="fl innerMaskBottom1">重置</button>
						<button @click="ok()" class="fr innerMaskBottom2">确定</button>
					</view>
				</view>
			</view>
			
			<view @click="hidden2()" v-if="dhtkFlag" @touchmove.stop.prevent class="sxMask">
				<view @tap.stop class="innerMask2 tac">
					<view class="C333 fs24 bold">
						<image style="width: 48upx;height: 48upx;position: relative;top: 15upx;right: 10upx;" src="../static/images/dhq_redyes.jpg" mode=""></image>
						恭喜您，领取成功
					</view>
					<view style="margin-top: 10px;" class="tac fs18 C666">
						感谢您的参与，祝您购物愉快
					</view>
					<view class="innerMask2Bs">
						<button @click="toUseintime()" class="innerMask2B1 fs21">立即使用</button>
						<button @click="hidden2()" class="innerMask2B2 fs21">关闭</button>
					</view>
				</view>
			</view>
			
			<view class="sortway fl fs22 commonTop">排序方式：</view>
			<view class="fl flex sort">
				<view @click="moren()" :class="morenFlag?'active1':''" class="fs22 commonTop">默认</view>
				
				<view @click="duihuanliang(0)" v-if="!duihuanliangFlag" :class="duihuanliangFlag?'active1':''" class="fs22 commonTop">
					<text>领取量</text>
					<image class="w21h31" src="../static/images/dhq_sjx.png" mode=""></image>
				</view>
				<view @click="duihuanliang(1)" v-if="duihuanliangFlag" :class="duihuanliangFlag?'active1':''" class="fs22 commonTop">
					<text>领取量</text>
					<image v-if="duihuanliangFlag2" class="w21h31" src="../static/images/dhq_sx.png" mode=""></image>
					<image v-if="!duihuanliangFlag2" class="w21h31" src="../static/images/dhq_jx.png" mode=""></image>
				</view>
				
				<view @click="jifenzhi(0)" v-if="!jifenzhiFlag" :class="jifenzhiFlag?'active1':''" class="fs22 commonTop">
					<text>积分</text>
					<image class="w21h31" src="../static/images/dhq_sjx.png" mode=""></image>
				</view>
				<view @click="jifenzhi(0)" v-if="jifenzhiFlag" :class="jifenzhiFlag?'active1':''" class="fs22 commonTop">
					<text>积分</text>
					<image v-if="jifenzhiFlag2" class="w21h31" src="../static/images/dhq_sx.png" mode=""></image>
					<image v-if="!jifenzhiFlag2" class="w21h31" src="../static/images/dhq_jx.png" mode=""></image>
				</view>
				
				
			</view>
			<view @click="shaixuanFlag=true" class="fr topRight">
				<image style="width: 40upx;height: 40upx;" src="../static/images/dhj_shaixuan.png" mode=""></image>
			</view>
		</view>
		<!-- 
		 	每人限领张数    voucherlist[].voucher_t_eachlimit
			会员持有的优惠券数量   user_voucher_count
		 -->
		<view v-for="(item,index) in voucherList" :key="index" class="ticket" @click="ToDeta(item.voucher_t_id)">
			<!-- <view class="">
				{{item.voucher_t_eachlimit}}
				{{item.user_voucher_count}}
			</view> -->
			<view class="ticketP Cfe0000">￥{{item.voucher_t_price}}</view>
			<view class="ticketC" v-if="item.voucher_t_range==0">全场通用</view>
			<view class="ticketC" v-if="item.voucher_t_range==1">商品优惠券</view>
			<view class="ticketC" v-if="item.voucher_t_range==2">限品类券</view>
			
			<view class="ticketN" v-if="item.voucher_t_range==0">全场通用</view>
			<view class="ticketN" v-if="item.voucher_t_range==1">{{item.goods_name}}</view>
			<view class="ticketN" v-if="item.voucher_t_range==2">{{item.gc_name}}</view>
			<view class="ticketM Cfe0000">满{{item.voucher_t_limit}}可用</view>
			<view class="ticketD Cfe0000">有效期：{{item.voucher_t_end_date}}</view>
			<view class="ticketX">详细信息
				<image src="../static/images/yhqIco.png" mode=""></image>
			</view>
			<!-- item.voucher_t_type,item.voucher_t_range -->
			<view @click.stop="gotTicket(item.voucher_t_id,item.voucher_t_type,item.voucher_t_range,item.voucher_t_rangeid,item,item.is_more_goods)" v-if="item.voucher_t_eachlimit > item.user_voucher_count || item.voucher_t_eachlimit == 0" class="ticketB Cfe0000">立即领取</view>
<!-- 			<view v-if="item.voucher_t_eachlimit > item.user_voucher_count || item.voucher_t_eachlimit == 0" class="ticketB2 fs18">			
				<text class="fs16" v-if="item.voucher_t_points.length < 4">需{{item.voucher_t_points}}积分</text>
				<text class="fs16" v-if="item.voucher_t_points.length >=4">需{{item.voucher_t_points/10000}}万积分</text>			
			</view>	 -->		
			<image class="ticketH" v-if="item.voucher_t_eachlimit == item.user_voucher_count && item.user_voucher_count != 0" src="../../static/images/hasgot.png" mode=""></image>			
			<image class="ticketBg" src="../static/images/yhgbg.png" mode=""></image>
		</view>		

	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				ididid:"",
				storeOrplatform:"",
				platformType:"",
				input1:"",
				input2:"",
				input3:"",
				input4:"",
				voucherList:[],
				shaixuanFlag:false,
				dhtkFlag:false,
				morenFlag:true,
				duihuanliangFlag:false,
				duihuanliangFlag2:false,
				jifenzhiFlag:false,
				jifenzhiFlag2:false,
				info:"",
				is_more_goods:'',
				voucher_t_id:''
			}
		},
		
		onLoad() {
			this.getListsData();
		},

		methods: {
			ToDeta(voucher_id){
				uni.navigateTo({
					url:"/operation/voucher/info?voucher_id="+voucher_id+"&type=1"
				})
			},
			//立即使用
			//voucherlist[].voucher_t_type	整型	代金券类别 0：店铺 1：平台
			//voucherlist[].voucher_t_range	整型	平台代金券类别 0：全场 1：商品 2：分类
			toUseintime(is_more_goods){
				uni.switchTab({
					url:"/main/home/index"
				})
				return false
				
				
				if(this.is_more_goods == 1){
					uni.navigateTo({
						url:'/operation/voucher/productsLists?voucher_t_id='+this.voucher_t_id
					})
				}else{
				this.dhtkFlag=false;		
						// uni.switchTab({
						// 	url:"/pages/home/index"
						// })
					if(this.info.voucher_t_range==0){
						if(store_id){
							uni.navigateTo({
								url:"/mall/store/store?store_id="+this.info.store_id
							})
						}else{
							uni.switchTab({
								url:"/main/home/index"
							})
						}
						
					}else if(this.info.voucher_t_range==1){//商品
						if(this.info.voucher_t_rangeid){
						
							uni.navigateTo({
								url:"/mall/goods/info?goods_id="+this.info.voucher_t_rangeid.split(",")[0]
							})
						}
					
					}else if(this.info.voucher_t_range==2){//分类
						uni.navigateTo({
							url:"/mall/goods/list?thirdid="+this.info.voucher_t_rangeid+"&index="+this.info.gc_name
						})
					}	
				}
						

			},
			cancel(){
				this.input1=null,
				this.input2=null,
				this.input3=null,
				this.input4=null
			},
			ok(){
				var that=this
				this.$util.request({
					url: '/mobile/index.php?act=pointvoucher&op=pointvoucher',
					method: 'get',
					data: {
						"min_price":this.input1,
						"max_price":this.input2,
						"min_shoppingGold":this.input3,
						"max_shoppingGold":this.input4	
					},
				}).then(function(res) {		
					console.log("代金券列表")
					that.voucherList=res.datas.voucherlist
					that.shaixuanFlag=false		
				})
			},
			getListsData(){
				var that=this
				this.$util.request({
					url: '/mobile/index.php?act=pointvoucher&op=pointvoucher',
					method: 'get',
					data: {
					},
				}).then(function(res) {		
					console.log("代金券列表")
					that.voucherList=res.datas.voucherlist			
				})
			},
			hidden(){
				this.shaixuanFlag=!this.shaixuanFlag
			},
			hidden2(){
				this.dhtkFlag=!this.dhtkFlag
			},
			moren(){
				this.morenFlag=true;
				this.duihuanliangFlag=false;
				this.jifenzhiFlag=false;
				console.log("默认排序")
				this.getListsData();
			},
			duihuanliang(num){
				this.morenFlag=false;
				this.duihuanliangFlag=true;
				this.jifenzhiFlag=false;
				
				this.duihuanliangFlag2=!this.duihuanliangFlag2;
				if(this.duihuanliangFlag2){
					console.log("领取量升序")
					var that=this
					this.$util.request({
						url: '/mobile/index.php?act=pointvoucher&op=pointvoucher',
						method: 'get',
						data: {							
							"sort_type":1,
							"v_order":1
						},
					}).then(function(res) {		
						console.log("领取量升序")
						that.voucherList=res.datas.voucherlist			
					})
					
				}else{
					console.log("领取量降序")
					var that=this
					this.$util.request({
						url: '/mobile/index.php?act=pointvoucher&op=pointvoucher',
						method: 'get',
						data: {							
							"sort_type":1,
							"v_order":2
						},
					}).then(function(res) {		
						console.log("领取量降序")
						that.voucherList=res.datas.voucherlist			
					})
				}
			},
			jifenzhi(){
				this.morenFlag=false;
				this.duihuanliangFlag=false;
				this.jifenzhiFlag=true;
				
				this.jifenzhiFlag2=!this.jifenzhiFlag2;
				if(this.jifenzhiFlag2){
					console.log("积分值升序")
					var that=this
					this.$util.request({
						url: '/mobile/index.php?act=pointvoucher&op=pointvoucher',
						method: 'get',
						data: {							
							"sort_type":2,
							"v_order":1
						},
					}).then(function(res) {		
						console.log("积分值升序")
						that.voucherList=res.datas.voucherlist			
					})
				}else{
					console.log("积分值降序")
					var that=this
					this.$util.request({
						url: '/mobile/index.php?act=pointvoucher&op=pointvoucher',
						method: 'get',
						data: {							
							"sort_type":2,
							"v_order":2
						},
					}).then(function(res) {		
						console.log("积分值降序")
						that.voucherList=res.datas.voucherlist			
					})
				}
			},
			
			gotTicket(num,num2,num3,num4,item,is_more_goods){	
				this.info=item
				this.storeOrplatform=num2
				this.platformType=num3
				this.ididid=num4
				var that=this
				this.$util.request({
					url: '/mobile/index.php?act=pointvoucher&op=voucherexchange_save',
					method: 'post',
					data: {
						"vid":num
					},
				}).then(function(res) {		
					if(res.error_code == '0'){
						that.voucher_t_id = num
						that.is_more_goods = is_more_goods
						that.dhtkFlag=true
						that.getListsData();
					}
					if(res.message == 'success'){
						that.voucher_t_id = num
						that.is_more_goods = is_more_goods
						that.dhtkFlag=true
						that.getListsData();
					}
					if(res.error_code == '6630002'){
						uni.showToast({
							title:res.message,
							icon:"none"
						})
					}
								
				})
				
				
			}
		}
	}
</script>

<style>
	
	.mt55mb30{
		margin-top: 55upx;
		margin-bottom: 30upx;
	}
	.Cfff{
		color: #FFFFFF;
	}
	.Cfe0000{
		color: #ff4300;
	}
	.w21h31{
		width: 21upx;
		height: 25upx;
		position: relative;
		top: 6upx;
		left: 5upx;
	}
	.flex{
		
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-content: space-around;
	}
	.paddingL20{
		padding-left: 20upx;
	}
	.C999{
		color:#999 ;
	}
	.Cff0101{
		color:#ff0101 ;
	}
	.Cc00251{
		color: #c00251;
	}
	.strick{
		text-decoration: line-through;
	}
	.Cfe0000{
		color: #ff4300;
	}
	.line1{
		width: 430upx;
	}
	.hide{
		display: none;
	}
	.marginB20{
		margin-bottom: 20upx;
	}
	
	.twoline{
	   overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.pl20{
		padding-left: 20upx;
	}
	.positionT{
		position: relative;
		top: 50upx;
	}
	.paddingB15{
		padding-bottom: 15upx;
	}
	.borderB{
		border-bottom: 1px solid #f4f4f6;
	}
	.borderT{
		border-top: 1px solid #f4f4f6;
	}
	.gl{
		position: absolute;
		right: 30upx;
	}
	.pr30{
		padding-right: 30upx;
	}
	.C333{
		color: #333333;
	}
	.C666{
		color: #666666;
	}
	.Cf00{
		color: #ff0000;
	}
	
	.bold{
		font-weight: bold;
	}
	.C1d1d1d{
		color:#1d1d1d ;
	}
	.fs30{
		font-size: 30upx
	}
	.fs26{
		font-size: 26upx
	}
	.fs28{
		font-size: 28upx
	}
	.fs30{
		font-size: 28upx
	}
	.fs24{
		font-size: 24upx
	}
	.fs20{
		font-size: 20upx
	}
	.fs22{
		font-size: 22upx
	}
	.fs21{
		font-size: 21upx
	}
	.fs16{
		font-size: 24upx
	}
	.fl{
		float: left;
	}
	.fr{
		float: right;
	}
	.tac{
		text-align: center;
	}
	uni-page-body {
		background-color: #FFFFFF;
		color: rgb(102, 102, 102);
	}
	.top{
		padding: 0 20upx;
		height: 80upx;
		line-height: 80upx;
		background-color: #f0f0f0;		
	}
	.commonTop{
		height: 80upx;
		line-height: 80upx;
		text-align: center;
	}
	.sortway{
		width: 170upx;
	}
	.sort{
		width: 450upx;
	}
	.topRight{
		text-align: center;
		width: 90upx;
		height: 80upx;
		line-height: 80upx;
	}
	.topRight image{
		position: relative;
		top: 12upx;
	}
	.flex>view{
		padding: 0 35upx;		
	}
	.ticket{
		position: relative;
		width: 100%;
		height: 292upx;
		background-color: #f0f0f0;
		/* margin-top: 30upx; */
	}
	
	.ticket .ticketBg{
		
		width: 710upx;
		height: 232upx;
		position: absolute;
		left: 20upx;
		top: 30upx;
		z-index:0;
	}
	.ticketP{
		z-index: 10;
		position: absolute;
		font-size: 70upx;
		left: 60upx;
		top: 40upx;
		font-weight: bold;
	}
	.ticketM{
		z-index: 10;
		position: absolute;
		font-size: 22upx;
		left: 340upx;
		top: 108upx;
	}
	.ticketD{
		z-index: 10;
		position: absolute;
		font-size: 24upx;
		left: 60upx;
		top: 182upx;
	}
	.ticketB{
		z-index: 10;
		width: 146upx;
		height: 62upx;
		line-height: 62upx;
		text-align: center;
		position: absolute;
		font-size: 22upx;
		left: 560upx;
		top: 83upx;
		background-color: #fff;
		color:#ff4300;
		border-radius: 31upx;
	}
	.ticketB2{
		color: #ffcccc;
		z-index: 10;
		position: absolute;
		left: 560upx;
		top: 76px;
		/* border-radius: 15px; */
		width: 156upx;
		height: 60upx;
		text-align: center;

	}
	.ticketH{
		z-index: 20;
		width: 100upx;
		height: 100upx;
		position: absolute;
		left: 580upx;
		top: 93upx;
	}
	.active1{
		background-color: #ff4300;
		color: #FFFFFF;
	}
	
	/* 筛选 */
	.sxMask{
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: rgba(0,0,0,0.3);
		z-index: 100000;
	}
	.innerMask{
		width: 598upx;
		height: 1192upx;
		background-color: #fff;
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: 100000;
	}
	.innerMask2{
		width: 598upx;
		height: 1192upx;
		background-color: #fff;
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: 100000;
	}
	.innerMaskTop{
		padding:0 28upx;
		height: 83upx;
		line-height: 83upx;
		background-color: #fafafa;
		font-size: 21upx
	}
	.sx{
		width: 30upx;
		height: 30upx;
		position: relative;
		top: 8upx;
		left: 5upx;
	}
	.innerMaskBottom{
		width: 100%;
		position: absolute;
		height: 80upx;
		bottom: 0;
		left: 0;
		
	}
	.innerMaskBottom button{
		height: 80upx;
		line-height: 80upx;
		width: 50%;		
		border: none;
		outline: none;
		border-radius: 0;
	}
	.innerMaskBottom1{
	
		background-color: #d2d2d2;
		color: #666666;
		font-size: 21upx
	}
	.innerMaskBottom2{
		background-color: #ff4300;
		color: #FFFFFF;		
		font-size: 21upx
	}
	.sxInput{
		width: 240upx;
		height: 70upx;
		background-color: #f0f0f0;
		border-radius: 5upx;
	}
	.sxblx{
		width: 60upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		color: #666;
	}
	.innerMask2{
		width: 610upx;
		height: 350upx;
		background-color: #fff;
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		top: 0;
		margin: 500upx auto;
		padding-top: 60upx;
		z-index: 100000;
	}
	.innerMask2Bs{
		width: 380upx;
		margin:60upx auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.innerMask2Bs button{
		width: 176upx;
		height: 60upx;
		line-height: 60upx;
		border: none;
		outline: none;
	}
	.innerMask2B1{
		background-color: #ff4300;		
		color: #FFFFFF;
	}
	.innerMask2B2{
		background-color: #f0f0f0;
		color: #666666;
		border-color:#f0f0f0;
	}
	.ticketC{
		z-index: 10;
		position: absolute;
		font-size: 24upx;
		left: 334upx;
		top: 75upx;
		border: 1rpx solid #ff4300;
		color: #ff4300;
		padding: 0 10rpx;
		line-height: 30rpx;
		border-radius: 20rpx;
	}
	.ticketN{
		z-index: 10;
		position: absolute;
		font-size: 24upx;
		left: 76upx;
		top: 148upx;
		color: #ff4300;
		padding: 0 10rpx;
		line-height: 30rpx;
		width: 150rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.ticketX{
		z-index: 10;
		position: absolute;
		font-size: 24upx;
		color: #666666;
		left: 340upx;
		top: 182upx;
	}
	.ticketX image{
		width: 35rpx;
		height: 35rpx;
		margin-bottom: -6rpx;
		margin-left: 5rpx;
	}
</style>
